<template>
  <h1>vue3 的基础语法</h1>
  <!-- 文本 -->
  <h2>{{msg}}</h2>
  <!-- 表达式 -->
  <h2>{{ num * 2 }}</h2>
  <!-- 调用函数 -->
  <h2>{{getContent()}}</h2>
  <h2>{{ htmlSpan }}</h2>


  <!-- 指令 -->
  <h2 v-text="msg"></h2>
  <h2 v-html="htmlSpan"></h2>

  <!-- v-bind 绑定属性 语法糖  -->
  <img src="https://img0.baidu.com/it/u=1467103477,1326226621&fm=253&app=138&f=JPEG?w=800&h=800"   alt=""/>
  <img v-bind:src="imgSrc" alt="" />
  <img :src="imgSrc" alt="">

  <!-- v-on 绑定事件 -->
  <button v-on:click="clickEvent">我是按钮</button>
  <button @click="clickEvent">我是按钮</button>

  <!-- 绑定css样式 -->
  <h2 class="h2Class">我是个h2的标签</h2>

  <h2 class="h2Class" :class="{ active: varCss }">我是个h2的标签</h2>
  <button @click="changCSS">点击切换样式</button>
  <h2 :class="varCss ? 'active': 'other'">我是个h2的标签</h2>

</template>


<script setup>

import { ref } from 'vue'

let msg = "你好"
msg = "hello"

const num = 1


const getContent = () => {
  console.log('getContent');
  
  return 'hello VUE'
}


const htmlSpan = "<i>vue3</i>"


const imgSrc = "https://img0.baidu.com/it/u=1467103477,1326226621&fm=253&app=138&f=JPEG?w=800&h=800"


const clickEvent = () => {
  console.log('点击了我');
  
}
let varCss1 = false

const varCss =  ref(false)  
// varCss = {
//   value: false
// }


const changCSS = () => {
  console.log(varCss);
  // varCss1 = true
  // varCss.value = true
  varCss.value = !varCss.value
}


if(varCss.value) {
  console.log('真');
  
} else {
  console.log('假');
  
}

// varCss.value ? '真': '假'

</script>


<style>

img {
  width: 200px;
  margin-right: 20px;
}

.h2Class {
  color: red;
}

.active {
  text-decoration: underline;
}

.other {
  color: orange;
}
</style>